<template>
  <div class="iconBox">
    <i :ref="iconRef" :class="iconClass"></i>
  </div>
</template>

<script>
import XEUtils from "xe-utils";
export default {
  name: "myIcon",
  props: {
    //自定义按钮ref
    iconRef: {
      type: String,
      default() {
        return "vueIcon";
      },
    },
    model: {
      // 当前组件绑定值
      type: [String, Number, Boolean, Array],
      require: true,
    },
    modelKey: {
      //当前绑定值key，可以用于formData中获取到当前组件渲染配置items
      type: String,
      default() {
        return "";
      },
    },
    fromSource: {
      //用于formData中获取到当前组件渲染配置items
      type: [Array, String],
      default() {
        return "";
      },
    },
    which: {
      //第几组图标
      type: [String, Number],
      default() {
        return 1;
      },
    },
    // disabled: {
    //   // 当前组件是否禁用
    //   type: Boolean,
    //   default() {
    //     return false;
    //   },
    // },
    config: {
      //私有配置数据
      type: [String, Object],
      require: true,
    },
    formConfigData: {
      //配置数据
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      childModel: this.model ? this.model : "",
      iconClass: "el-icon-eleme",
      configDefault: {
        isCustomData: true,
        options: [],
        props: {
          label: "className",
          id: "id",
        },
      },
    };
  },
  watch: {
    childModel(val, oldVal) {
      if (val !== oldVal) {
        this.$emit("update:model", val);
      }
      this.loadIconName();
    },
    model(val, oldVal) {
      if (val !== this.childModel) {
        this.childModel = val;
      }
    },
    formConfigData: {
      handler(newVal) {
        let formConfigObj = newVal
          ? newVal[this.fromSource] || newVal[this.modelKey]
          : {};
        let publicConfigObj = newVal ? newVal["publicAttr"] : {};
        let cfg =
          this.config && XEUtils.isString(this.config)
            ? XEUtils.toStringJSON(this.config)
            : this.config || {};
        this.configDefault = XEUtils.merge(
          this.configDefault,
          publicConfigObj,
          cfg,
          formConfigObj
        );
        this.loadIconName();
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    loadIconName() {
      if (this.configDefault.isCustomData) {
        let fromSourceData = this.configDefault.options
          ? this.configDefault.options
          : [];
        let matchObj = XEUtils.find(
          fromSourceData,
          (item) => item[this.configDefault.props.id] === this.childModel
        );
        let currentClassName = matchObj
          ? matchObj[this.configDefault.props.label] || ""
          : "";
        this.iconClass = currentClassName || this.iconClass || "";
      } else {
        this.iconClass = this.childModel || this.iconClass || "";
      }
    },
  },
};
</script>

<style lang="less">
.iconBox {
  line-height: 36px;
}
</style>
